<template>
  <view class="content-evidence">
    <tempalte v-for="(item, index) in 3" :key="index">
      <view
        class="evidence-item px-[30rpx] pt-[30rpx] pb-[16rpx] box-border module-part mb-[20rpx]"
      >
        <view class="">
          <view
            class="serial-id flex flex-row items-center justify-between mb-[20rpx]"
          >
            <view
              class="text-[#222222] text-[32rpx] grow max-w-full overflow-hidden text-ellipsis line-clamp-1"
              >{{ info.name }}</view
            >
            <view class="text-[#999999] text-[24rpx] whitespace-nowrap">{{
              info.status
            }}</view>
          </view>
          <view class="text-[#666666] text-[28rpx]">
            <view class="flex items-start gap-[10rpx]">
              <view class="whitespace-nowrap">证明内容：</view>
              <view class="grow max-w-full overflow-hidden text-ellipsis">{{
                info.casePoints
              }}</view>
            </view>
            <view class="desc-list">
              <view class="title">证明来源：</view>
              <view
                class="max-w-full overflow-hidden text-ellipsis line-clamp-1"
                >{{ info.type }}</view
              >
            </view>
            <view class="desc-list">
              <view class="title">提交人：</view>
              <view>{{ info.draftsman }}</view>
            </view>
            <uni-collapse>
              <uni-collapse-item
                :title="`提交日期：${info.time}`"
                :border="false"
                title-border="none"
              >
                <view class="content py-[10rpx]">
                  <swiper
                    class="swiper h-[270rpx]"
                    circular
                    :indicator-dots="true"
                    indicator-color="#DDDDDD"
                    indicator-active-color="#1E92F0"
                    :autoplay="false"
                    :duration="1000"
                  >
                    <template v-for="(item, index) in 3" :key="index">
                      <swiper-item>
                        <view
                          class="swiper-item flex felx-row justify-between items-center"
                        >
                          <image
                            src="https://fc1tn.baidu.com/it/u=1246942839,3200976866&fm=203&mola=new&crop=v1"
                            mode="aspectFit"
                            class="w-[194rpx] h-[194rpx] rounded-[16rpx]"
                          ></image>
                          <image
                            src="https://fc1tn.baidu.com/it/u=1246942839,3200976866&fm=203&mola=new&crop=v1"
                            mode="aspectFit"
                            class="w-[194rpx] h-[194rpx] rounded-[16rpx]"
                          ></image>
                          <image
                            src="https://fc1tn.baidu.com/it/u=1246942839,3200976866&fm=203&mola=new&crop=v1"
                            mode="aspectFit"
                            class="w-[194rpx] h-[194rpx] rounded-[16rpx]"
                          ></image>
                        </view>
                      </swiper-item>
                    </template>
                  </swiper>
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </view>
        </view>
      </view>
    </tempalte>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

const info = ref({
  name: "证据名称证据名称名称",
  casePoints:
    "民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷",
  type: "民事",
  draftsman: "黛玉",
  time: "2025-03-05",
  status: "1份/17页",
});
</script>

<style lang="scss" scoped>
.content-evidence {
  .desc-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10rpx;
    .title {
      white-space: nowrap;
    }
  }
  :deep(.uniui-bottom) {
    content: url("@/static/images/icon-down1.png");
    width: 26rpx;
    height: 26rpx;
  }
  :deep(.uni-collapse-item__title-box) {
    padding: 0;
    height: 70rpx;
    line-height: 70rpx;
    color: #666666;
    font-size: 28rpx;
    font-weight: normal;
  }
  :deep(.uni-collapse-item__title-arrow) {
    margin-right: 0;
  }
}
</style>
